import { Carousel, Tabs } from "antd";
import style from "./index.module.scss";
import { useEffect, useState } from "react";
import MusicPlayModules from "./components/MusicPlayModules";
const carouselList = [
	"http://localhost:8000/static/images/1.jpg",
	"http://localhost:8000/static/images/2.jpg",
	"http://localhost:8000/static/images/3.jpg",
	"http://localhost:8000/static/images/4.jpg",
	"http://localhost:8000/static/images/5.jpg",
	"http://localhost:8000/static/images/6.jpg"
];
function MusicCarousel() {
	const [carouselBgImage, setCarouselBgImage] = useState("");
	const carouselAfterChange = (current: number) => {
		setCarouselBgImage(carouselList[current]);
	};
	useEffect(() => {
		if (carouselList.length > 0) {
			setCarouselBgImage(carouselList[0]);
		}
	}, []);
	return (
		<div
			className={style.carouselBox}
			style={{
				"--background-image": `url(${carouselBgImage})`
			}}
		>
			<Carousel
				arrows
				waitForAnimate
				afterChange={carouselAfterChange}
				infinite={true}
			>
				{carouselList.map((item, index) => {
					return (
						<div className={style.itemBox} key={index}>
							<h3
								className={style.carousel}
								style={{
									backgroundImage: `url(${item})`
								}}
							>
								{item}
							</h3>
						</div>
					);
				})}
			</Carousel>
		</div>
	);
}
function DiscoverModules() {
	return (
		<div className={style.discover}>
			<Tabs
				defaultActiveKey="1"
				type="card"
				items={new Array(3).fill(null).map((_, i) => {
					const id = String(i + 1);
					return {
						label: `Card Tab ${id}`,
						key: id,
						children: <div>{id}</div>
					};
				})}
			/>
		</div>
	);
}

function Music() {
	return (
		<div className={style.music}>
			<MusicCarousel />
			<DiscoverModules />
			<MusicPlayModules />
		</div>
	);
}
export default Music;
